import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  DeviceEventEmitter
} from "react-native";
import NavBarConfig from "../modules/NavBar";
import { REDEEM } from "../../config/Api";
import http from "../../util/http";
import { isScrollBottom } from "../../util/util";
import moment from "moment";
import { REDEEM_DETAIL } from "../../util/Const";
import storage from "../../util/storage";
import redeemStyles from "../../style/pages/redeem";
import { Color } from "../../style/common";

const status = {
  0x11: "未審核",
  0x21: "審核通過",
  0x42: "審核未通過",
  0x82: "作廢/取消",
  0xA2: "取消",
  0x102: "贖回成功"
};

class RedeemList extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "贖回列表",
        headerRight: []
      },
      navigation
    );
  state = {
    pageNo: 0,
    list: [],
    totalPage: 0
  };
  async getNoticeList(flag = false) {
    if (this.state.pageNo === this.state.totalPage && this.state.pageNo > 0)
      return;
    let data = await http.get(REDEEM, {
      page: flag ? 1 : this.state.pageNo
    });
    if (data)
      this.setState({
        pageNo: this.state.pageNo + 1,
        list: flag ? data.data.list : this.state.list.concat(data.data.list),
        totalPage: Math.ceil(data.data.count / data.data.take)
      });
  }

  handleScrollBottom = e => {
    isScrollBottom(e, () => {
      this.getNoticeList();
    });
  };

  componentWillMount() {
    this.getNoticeList();
    this.subscription = DeviceEventEmitter.addListener("refresh_redeem", () => {
      this.getNoticeList(true);
    });
  }

  componentWillUnmount() {
    this.subscription.remove();
  }

  setRedeem(id) {
    const redeem = this.state.list.find(item => item.id == id);
    storage.set(REDEEM_DETAIL, JSON.stringify(redeem));
  }

  render() {
    return (
      <ScrollView onMomentumScrollEnd={this.handleScrollBottom}>
        <View cstyle={redeemStyles.redeemList}>
          <View
            style={[
              redeemStyles.redeemListLi,
              redeemStyles.redeemListLiRedeemHead
            ]}
          >
            <Text style={redeemStyles.redeemListLiDiv}>贖回金額</Text>
            <Text style={redeemStyles.redeemListLiDiv}>申請時間</Text>
            <Text style={redeemStyles.redeemListLiDiv}>贖回狀態</Text>
            <Text style={redeemStyles.redeemListLiDiv}>操作</Text>
          </View>

          {this.state.list.map((redeem, index) => (
            <TouchableOpacity
              onPress={() => {
                this.setRedeem(redeem.id);
                this.props.navigation.navigate("RedeemConfirm", {
                  id: redeem.id
                });
              }}
              style={redeemStyles.redeemListLiA}
              key={index}
            >
              <View
                style={{
                  flexDirection: "row"
                }}
              >
                <Text style={redeemStyles.redeemListLiDiv}>
                  {redeem.amount}
                </Text>
                <Text style={redeemStyles.redeemListLiDiv}>
                  {/* {redeem.createtime} */}
                  {moment(new Date(redeem.createtime)).utcOffset(new Date(redeem.createtime).getTimezoneOffset()).format("YYYY-MM-DD")}
                </Text>
                <Text style={redeemStyles.redeemListLiDiv}>
                  {status[redeem.status]}
                </Text>
                <Text style={[redeemStyles.redeemListLiDiv, { color: Color }]}>
                  {redeem.status === 0x11
                    ? "作廢"
                    : redeem.status === 0x21
                      ? "確認"
                      : "查看"}
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    );
  }
}

export default RedeemList;
